<%@ tag language="java" pageEncoding="UTF-8" body-content="empty" trimDirectiveWhitespaces="true"%>
<%@ taglib prefix="u" uri="/iuie-tag"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ attribute name="id" type="java.lang.String" required='true' description="分页组件的id"%>
<%@ attribute name="pageSize" type="java.lang.Integer" required='false' description="每一页显示多少条记录，默认值 10"%>
<%@ attribute name="showPageChoice" type="java.lang.Boolean" required='false' description="是否显示下拉选择框，默认值  showChoice='true'"%>
<%@ attribute name="datatable" type="java.lang.String" required='true' description="和pagination相关联的datatable"%>
<%@ attribute name="pageChoice" type="java.lang.String" required='false' description="下拉选择每页显示多少条记录，默认值：choice='5,10,15'"%>
<c:set var="paginationId" value="${u:uuid() }"></c:set>

<div id="${id}" class="pagination-wrapper" data-pagination='${paginationId }'>
	<ul id="ul" class="pagination">
		<li class="previous"><a id="homePage" href="javascript:void(0)" onclick="${id}.pageChanged('homePage')" ><i class='fa fa-fw fa-caret-left'></i></a></li>
		<li class="previous"><a id="prevPage" href="javascript:void(0)" onclick="${id}.pageChanged('prevPage')" ><i class='fa fa-fw fa-angle-left'></i> </a></li>
		<li class="pagination-input"><a href="javascript:void(0)" ><input id='currentPage' name='page' value='1' onchange="${id}.pageChanged('currentPage')" onpause="return false;" ondrop="return false;" ondrag="return false;"></a></li>
		<li class="next"><a id="nextPage" href="javascript:void(0)" onclick="${id}.pageChanged('nextPage')" ><i class='fa fa-fw fa-angle-right'></i></a></li>
		<li class="next"><a id="endPage" href="javascript:void(0)" onclick="${id}.pageChanged('endPage')" ><i class='fa fa-fw fa-caret-right'></i></a></li>
		<li><a class='text'>共<span id='maxPage'>1</span>页，<span id='count'></span>条记录<span class='pageSize'>，显示</span></a></li>
		<li class='pagination-input pageSize' >
		    <select class="form-control rows" name="rows" id="rows" onchange="${id}.pageChanged('rowsChanged')">
				<option value="5" selected="selected">5</option>
				<option value="10">10</option>
				<option value="15">15</option>
			</select>
		</li>
	</ul>
</div>
<script type="text/javascript">
(function(){
	window.TagSupport.pagination({'id':"${id}", 'pageSize':"${pageSize}", 'showPageChoice':"${showPageChoice}", 'datatable':"${datatable}", 'pageChoice':"${pageChoice}",'paginationId':'${paginationId}'});
})();
</script>
